<template>
    <div class='filmprograms'>
        <navbarW :navbarIndex='1'></navbarW>
        <!-- 项目 -->
        <div class='projectList'>
            <div class='projectBox'>
                 <div class='list'>
                     <div class='listItem' @click='goDetails(item)' v-for='(item,index) in list' :key='index'>
                         <div class='imgBox'>
                             <img :src="item.carousels[0]" alt="">
                         </div>
                         <ul>
                             <li>
                                 <h3>{{item.title}}</h3>
                             </li>
                             <li>
                                <p>
                                    <span>电影类型:</span>
                                    <span>{{getMovieType(item)}}</span>
                                </p>
                             </li>
                             <li>
                                <p>
                                    <span>上映状态:</span>
                                    <span>{{getMovieStatus(item)}}</span>
                                </p>
                             </li>
                             <li>
                                <p>
                                    <span>出品方:</span>
                                    <span>{{getproducer(item)}}</span>
                                </p>
                             </li>
                             <li>
                                <el-progress class='progress' :text-inside="true" :stroke-width="18" :percentage="getPercentage(item)" color="#ff1268"></el-progress>
                             </li>
                         </ul>
                     </div>
                 </div>
                 <p class='moreLine'>
                    <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                 </p>
            </div>
        </div>
        <fillInformation></fillInformation>
        <footerBottom></footerBottom>
    </div>
</template>


<script>
import navbarW from './components/navbarW';
import fillInformation from './components/fillInformation';
import footerBottom from './components/footer';
import { ajax } from "@/api";
export default {
    name:'filmprograms',
    data(){
        return {
             params:{
                start:0,
                limit:10
            },
            list:[],
            total:0,
            userList:[]
        }
    },
    methods:{
        handleCurrentChange(val){
            this.params.start = (val - 1) * this.params.limit;
            this.getList();
        },
        //影视项目
        getList(){
            ajax('movies',this.params).then((json) => {
                console.log(json);
                if(json.data.code === 200){
                    this.list = json.data.data;
                    this.userList = json.data.users;
                    this.total = json.data.total;
                }
            });
        },
        //电影类型
        getMovieType(item){
            return item.type.text;
        },
        //上映类型
         getMovieStatus(item){
            return item.releaseStatus.text;
        },
        //发行商
        getproducer(item){
            console.log(this.userList,item.userId);
            return this.userList[item.userId].name;
        },
        getPercentage(item){
            return  this.getScale(item.salesOfMoney, item.totalOfMoney);
        },
      
        //百分比
        getScale(num, total) {
            num = parseFloat(num);
            total = parseFloat(total);
            // if (isNaN(num) || isNaN(total)) {
            //   return "-";
            // }
            return total <= 0 ? 0 : Math.round((num / total) * 10000) / 100.0;
        },
        goDetails(item){
            this.$router.push({name:'projectFillDetails',params:{'movieId':item.movieId}});
        }
    },
    mounted(){
        this.getList();
    },
    components:{
        navbarW,
        fillInformation,
        footerBottom
    }
}
</script>

<style lang="less" scoped>
.filmprograms{
    .projectList{
        padding-top: 2rem;
        width: 100%;
        background: #f4f4f4;
        padding: 15rem 0 1.5rem 0;
        .projectBox{
            width: 1200px;
            min-width: 1200px;
            margin: 0 auto;
            h3{
                margin: 1rem 0 1.3rem 0;
                font-weight: 400;
                font-size: 18px;
                padding-left: .7rem;
                color: rgba(16, 16, 16, 1);
                border-left: 7px solid #ff1268;
            }
            .list{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .listItem{
                    width: 380px;
                    // height: 390px;
                    box-shadow: 0 0 8px 0 rgb(170, 170, 170);
                    background: #fff;
                    margin: 0 1rem 3rem 0;
                    cursor: pointer;
                    .imgBox{
                        width: 100%;
                        height: 230px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    ul{
                        padding: .8rem;
                        line-height: 1.6rem;
                        li{
                            h3{
                                font-weight: 400;
                                font-size: 18px;
                                color: #000;
                                margin: 0 0 .3rem 0;
                                border: none;
                                padding: 0;
                            }
                            p{
                                margin: 0;
                                span{
                                    font-size: 14px;
                                }
                                span:first-child{
                                    color: #ff1268;
                                }
                                span:last-child{
                                    color: #000;
                                }
                            }
                        }
                        li:last-child{
                            padding-bottom: .1rem;
                            .progress{
                                margin: 1rem 0 0 0;
                                .el-progress-bar__inner{
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
            .moreLine{
                text-align: center;
                .more{
                    display: inline-block;
                    padding: 0.9rem 2.5rem;
                    background: #ff1268;
                    color: #fff;
                    text-align: center;
                }
            }
        }

    }

}
</style>
